<template>
  <div class="business_add">
		<section class="business_content">
			<h1 class="title">商家注册</h1>
			<p class="sub_title">加入我们的餐饮管理平台</p>
			<el-form ref="formObj" :model="wyform" :rules="rules" label-width="80px">
				<el-form-item label="商家名称" prop="name">
					<el-input :prefix-icon="Suitcase" v-model="wyform.name" placeholder="请输入商家名称"></el-input>
				</el-form-item>
				<el-form-item label="联系人" prop="user">
					<el-input :prefix-icon="User" v-model="wyform.user" placeholder="请输入联系人姓名"></el-input>
				</el-form-item>
				<el-form-item label="联系电话" prop="phone">
					<el-input :prefix-icon="Phone" v-model="wyform.phone" placeholder="请输入联系电话"></el-input>
				</el-form-item>
				<el-form-item label="商家地址" prop="address">
					<el-input type="textarea" :rows="3" v-model="wyform.address" placeholder="请输入详细地址"></el-input>
				</el-form-item>
				<el-form-item label="商家简介" prop="description">
					<el-input
						type="textarea"
						:rows="5"
						v-model="wyform.description"
						placeholder="请简单介绍您的商家特色(选填)"
						:maxlength="200"
						show-word-limit></el-input>
				</el-form-item>
				<el-form-item label="登录密码" prop="password">
					<el-input :prefix-icon="LockIcon" v-model="wyform.password" placeholder="请输入登录密码" show-password></el-input>
				</el-form-item>
				<el-form-item label="确认密码" prop="repassword">
					<el-input :prefix-icon="LockIcon" v-model="wyform.repassword" placeholder="请再次输入密码" show-password></el-input>
				</el-form-item>
				<el-form-item>
					<el-checkbox v-model="checked">
						<template #default>
							<div class="check_box">
								<span>我已阅读并同意</span>
								<el-link type="primary" :underline="false">《服务协议》</el-link>
								<span>和</span>
								<el-link type="primary" :underline="false">《隐私政策》</el-link>
							</div>
						</template>
					</el-checkbox>
				</el-form-item>
				<el-form-item>
					<el-button style="width: 100%;" type="success" @click="save">立即注册</el-button>
				</el-form-item>
			</el-form>
			<footer>
				<span>已有账号？</span>
				<el-link type="primary" :underline="false">立即登录</el-link>
			</footer>
		</section>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { Suitcase, User, Phone } from '@element-plus/icons-vue'
import LockIcon from '@@/icons/lock'
import { ElMessage } from 'element-plus'
import axios from 'axios'
import router from '@/router' 
const formObj = ref()
const checked = ref(false)
const wyform = reactive({
	name: '',
	user: '',
	phone: '',
	address: '',
	description: '',
	password: '',
	repassword: ''
})
const checkRePassword = (rule, value, callback) => {
	if (value === wyform.password) {
		callback()
	} else {
		callback(new Error())
	}
}
const rules = {
	name: [
		{ required: true, message: '请输入商家名称', trigger: 'blur'  },
		{ max: 255, message: '商家名称最多255个字符', trigger: 'blur' }
	],
	user: [
		{ required: true, message: '请输入联系人姓名', trigger: 'blur'  },
		{ max: 20, message: '联系人最多20个字符', trigger: 'blur' }
	],
	phone: [
		{ required: true, message: '请输入联系电话', trigger: 'blur'  },
		{ pattern: /^1[3-9]\d{9}$/, message: '请输入中国大陆地区手机号', trigger: 'blur' }
	],
	address: [
		{ required: true, message: '请输入商家地址', trigger: 'blur'  },
		{ max: 255, message: '商家地址最多255个字符', trigger: 'blur' }
	],
	description: [
		{ max: 200, message: '商家简介最多200个字符', trigger: 'blur' }
	],
	password: [
		{ required: true, message: '请输入登录密码', trigger: 'blur' }
	],
	repassword: [
		{ required: true, message: '请输入确认密码', trigger: 'blur' },
		{ validator: checkRePassword, message: '两次密码必须一致', trigger: 'blur' }
	]
}
function save () {
	if (!checked.value) {
		ElMessage.error('请仔细阅读服务协议和隐私政策,并勾选同意')
		return
	}
	formObj.value.validate(valid => {
		if (valid) {
			axios.request({
				url: 'http://127.0.0.1:8080/business/add',
				method: 'post',
				params: wyform
			}).then(response => {
				ElMessage.success('注册成功')
				router.replace({
					path: '/login'
				})
			}).catch(error => {
				ElMessage.error('系统异常')
			})
		}
	})
}
</script>

<style scoped lang="scss">
.business_add {
	height: 100vh;
	background-color: #E6FCEF;
	display: flex;
	.business_content {
		height: 750px;
		width: 460px;
		border-radius: 20px;
		background-color: #fff;
		margin: auto;
		padding: 30px 20px;
		.title, .sub_title {
			text-align: center;
		}
		.sub_title {
			color: #717171;
			font-size: 0.8rem;
			margin-top: 5px;
		}
		.el-form {
			margin-top: 30px;
			.check_box {
				font-size: 0.75rem;
			}
		}
		footer {
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}
</style>